<template>
  <div class="padding-left-right-20 padding-top-10">
    <el-tabs class="has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.contractParentType" :name="item.contractParentType" :label="(item.contractParentTypeName || '') + '(' + (item.contractTypeNum || 0) + ')'"> </el-tab-pane>
      </template>
    </el-tabs>

    <form-common class="margin-top-30" :filed-list="searchContractCurrentList" ref="form" @selectChange="selectChange"></form-common>
    <div class="fill-box margin-bottom-20">
      <el-button type="primary" size="large" class="f-right margin-left-20 z-index-99" @click="searchFn">查询</el-button>
      <el-button size="large" class="f-right z-index-99" @click="resetFn">重置</el-button>
    </div>

    <el-table :key="activeTab" :border="false" stripe :data="tableData" class="new-table-style" @row-click="goInfo">
      <el-table-column align="left" label="合同名称" prop="contractName"> </el-table-column>

      <el-table-column align="left" label="资产" v-if="activeTab == typeList[0].contractParentType">
        <template slot-scope="scope">
          <span>{{ scope.row.assetName }}</span><br/>
          <span v-if="scope.row.leaserShopName">{{ scope.row.leaserShopName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="left" label="客户" prop="partnerName" v-if="activeTab == typeList[1].contractParentType"> </el-table-column>

      <template v-if="activeTab == typeList[2].contractParentType || activeTab == typeList[3].contractParentType">
        <el-table-column align="left" label="供方" prop="partnerName"> </el-table-column>
        <el-table-column align="left" label="子类别" prop="contractTypeName"> </el-table-column>
      </template>

      <el-table-column align="left" label="签署方" prop="partnerName" v-if="activeTab == typeList[4].contractParentType"> </el-table-column>

      <el-table-column align="left" label="关联方" prop="partnerName" v-if="activeTab == typeList[5].contractParentType"> </el-table-column>

      <!-- <el-table-column align="left" label="品牌" prop="operateBrandName"> </el-table-column> -->
      <el-table-column align="left" label="到期时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="更新时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同状态" prop="overdueNum" width="100">
        <template slot-scope="scope">
          <span>{{ getStatusName(scope.row.contractStatus) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="goInfo(scope.row)">查看</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <Pagination v-if="total" @change="pageChange" :total="total" :current-page="currentPage" paginationLayout="total, prev, pager, next" />
  </div>
</template>

<script>
  import { searchContractCurrentList } from './form';
  import formCommon from '@g/components/form/formCommon.vue';
  import { apiConstant } from '@a/index';
  import { apiBusinessContractList, apiCategoryList, apiAssetCodeList, apiContractCount } from '../../../api/contract';

  export default {
    name: 'current',
    data() {
      return {
        activeTab: '',
        tableData: [],
        typeList: [{}, {}, {}, {}, {}, {}],
        searchContractCurrentList: searchContractCurrentList,
        statusList: [
          {
            dictKey: '0',
            dictValue: '草稿',
          },
          {
            dictKey: 1,
            dictValue: '审批中',
          },
          {
            dictKey: 2,
            dictValue: '履行中',
          },
          {
            dictKey: 3,
            dictValue: '驳回',
          },
          {
            dictKey: 4,
            dictValue: '履行完毕',
          },
          {
            dictKey: 5,
            dictValue: '已废止',
          },
        ],
        contractTypeList: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        projectKey:localStorage.getItem('projectKey')
      };
    },
    mounted() {
      this.getConstant();
      this.getCategoryList();
      this.getContractTypeCount();
    },
    methods: {
      //切换tab
      tabClick(tab) {
        this.activeTab = tab.name;
        this.currentPage = 1;
        let obj = this.typeList.find(item => item.contractParentType == tab.name);
        this.contractTypeList = obj.contractTypeList;
        if (!this.contractTypeList || this.contractTypeList.length == 0) {
          this.tableData = [];
          this.total = 0;
        } else {
          this.getDataSource();
        }
      },

      async getDataSource() {
        let searchParam = this.$refs.form.validateForm();
        let res = await apiBusinessContractList({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          projectKey: this.projectKey,
          contractStage: 3,
          contractTypeList: this.contractTypeList,
          contractStatusList: [2,4,5],
          ...searchParam,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //资产类型
      async getConstant() {
        let res = await apiConstant();
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'assetTypeList') {
            item.optionList = res.spaceAssetType;
          }
        });
      },

      //资产
      async getAssetList(spaceTypeList) {
        let res = await apiAssetCodeList({
          projectKeys: this.projectKey ? [this.projectKey] : null,
          spaceTypeList: spaceTypeList,
        });
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'assetCodeList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //品牌
      async getCategoryList() {
        let res = await apiCategoryList({
          bizId: 'commercial_rent_main_data',
          bizType: 'commercial_rent_main_data',
          status: 1,
          catalogTypeList: ['brand_child'],
        });
        this.searchContractCurrentList.forEach(item => {
          if (item.bindFieldName == 'operateBrandList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //合同状态
      getStatusName(value) {
        let [obj] = this.statusList.filter(item => item.dictKey == value);
        return obj ? obj.dictValue : '';
      },

      //详情
      goInfo(row) {
        let param = {
          contractType: row.contractType,
          contractCode: row.contractCode,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          headerName: '合同管理',
          showApprove: "no"
        };
        let pathUrl = {
          name: 'contract-info',
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToInfo'
        window.open(href, windowName);
      },

      //数量
      async getContractTypeCount() {
        let res = await apiContractCount({
          countContractType: true, //(是否查询合同类型统计)
          countContractStage: false, //(是否查询合同阶段统计)
          ifOverdue: false, //(是否查询的是历史合同)
        });
        this.activeTab = res.contractTypeList[0].contractParentType;
        this.contractTypeList = res.contractTypeList[0].contractTypeList;
        this.typeList = res.contractTypeList || [];
        this.getDataSource();
      },

      selectChange(data) {
        if (data.filedName == 'assetTypeList') {
          this.getAssetList(data.filedVal);
        }
      },

      resetFn() {
        this.$refs.form.clearValidateForm();
        this.currentPage = 1;
        this.getDataSource();
      },

      //查询
      searchFn() {
        this.currentPage = 1;
        this.getDataSource();
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource();
      },
    },
    components: { formCommon },
  };
</script>

<style lang="scss" scoped>
  .z-index-99 {
    z-index: 99;
  }

  ::v-deep .el-table__row {
    cursor: pointer;
  }
</style>
